<template>
	<view class="recommendBox">
		<image src="../../static/tj.png" mode="widthFix" class="recommendTitleImg"></image>
		<text class="recommendTitle">每日推荐</text>
		<view class="recommend">
			<view class="recommend-left">
				<text class="rlTitle">宠物国际</text>
				<text class="rlTitle">嘴吃海外 胡吃海吃</text>
				<image :src="recommendImages.gj" mode="widthFix"></image>
			</view>
			<view class="recommend-right">
				<view class="rrBox">
					<text class="rlTitle">宠物玩具</text>
					<view class="rlTitle">
						谁还不是个宝宝呢
						<image :src="recommendImages.wj" mode="heightFix"></image>
					</view>
				</view>
				<view class="rrBox">
					<text class="rlTitle">宠物零食</text>
					<view class="rlTitle">
						长胖什么的我都不怕
						<image :src="recommendImages.ls" mode="heightFix"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			recommendImages:{}
		};
	},
	mounted(){
		
		let that=this
		this.$http({
			url:'/index/recommend',
			success(res){
				that.recommendImages=res.data
			}
		})
		
	}
};
</script>

<style scoped>
	.recommendBox{
		margin-top: 20rpx;
		border-top: 4rpx solid #eee;
		padding-top: 10rpx;
	}
.recommendTitle {
	font-size: 30rpx;
	font-weight: 300;
	margin: 0 10rpx;
}
.recommendTitleImg{
	width: 40rpx;
	margin-left: 20rpx;
	vertical-align: middle;
}
.recommend {
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	width: 100vw;
}
.recommend-left {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	flex: 1;
	padding-left: 20rpx;
	box-sizing: border-box;
}
.recommend-right {
	display: flex;
	flex-direction: column;
	flex: 1;
	border-left: 2rpx solid #eee;
}
.recommend-left image {
	width: 80%;
}
.recommend-right image {
	height: 110rpx;
	vertical-align: text-top;
	margin-left: 5rpx;
}
.rlTitle:nth-child(1) {
	font-size: 28rpx;
}
.rlTitle:nth-child(2) {
	font-size: 20rpx;
	color: #666;
	margin: 10rpx 0;
}
.rrBox {
	display: flex;
	flex-direction: column;
	padding: 10rpx;
	box-sizing: border-box;
}
.rrBox:nth-child(1) {
	border-bottom: 2rpx solid #eee;
}
</style>
